Stack (layout primitive)
垂直方向のmarginの指定のみが責務
水平方向は責務外
これが重要で、これを意識するとかなりシンプルに書けるmrsekut.icon
marginは文脈に基づいて適用することを上手くやっている
例
Stack using recursion: Every Layout
Nested stack variants: Every Layout
例外対応
https://24ways.org/2018/managing-flow-and-rhythm-with-css-custom-properties/
/mrsekut-book-486246517X/075
Stackの子の中で1要素だけ特殊な位置に置きたいときの対応
模したもの
MUIのStack
https://mui.com/material-ui/react-stack/
Chakra UIのStack
propsで、垂直方向・水平方向のいずれもサポートしている
実装をみればわかるが、責務が大きすぎるmrsekut.icon
子を<StackItem>で囲んで並べるという処理をmapで行っている
style都合でHTML要素が増えている
styleで一瞬で書けるものも大仰にJSで実装している感がある
https://codepen.io/mrsekut/pen/jOpyeWP
適当に書いたやつ
参考
/mrsekut-book-486246517X/070 (2-01 Stack)